<template>
	<cu-custom bgColor="" :isBack="false" show-circle>
		<template #title>宁波智慧教育督导助手</template>
	</cu-custom>
	
	<view class="page-content">
		<view v-show="currTab === '首页'"><Dashboard ref="dashboardRef" /></view>
		<view v-show="currTab === '我的'"><User /></view>
	</view>
	
	<view class="tabbar">
		<view class="cu-bar tabbar bg-white">
			<view class="action" v-for="(item, index) in tabList" :key="index">
				<view class="cuIcon-cu-image"  @click="switchTab(item)">
					<image :src="item.name === currTab ? relative_url + item.icon_active : relative_url + item.icon"></image>
				</view>
				<view class="tab-text" @click="switchTab(item)" :class="item.name === currTab ? 'text-blue' : 'text-gray'">{{ item.name }}</view>
			</view>
		</view>
	</view>
	
</template>

<script lang="ts" setup>
import { onBeforeMount, onMounted, ref, type Ref, watch } from "vue"
import { onLoad, onShow } from "@dcloudio/uni-app";
import Dashboard from "./components/dashboard.vue"
import User from "./components/user.vue"
import store from "@/store/index.js"
import { router } from "@/router"
import env from "@/env"


interface ITab {
	name: string
	icon: string
	icon_active: string
	url: string
}
const tabList = ref([
	{
		name: "首页",
		icon: "/static/images/tabbar/home.png",
		icon_active: "/static/images/tabbar/home-active.png",
		url: "Dashboard"
	},
	{
		name: "我的",
		icon: "/static/images/tabbar/user.png",
		icon_active: "/static/images/tabbar/user-active.png",
		url: "User"
	}
] as ITab[])
const currTab:Ref<string> = ref("首页")
const relative_url: Ref<string> = ref("")
const dashboardRef:Ref<any> = ref()

const switchTab = (item:ITab) => {
	currTab.value = item.name
}
watch(currTab, (newValue) => {
	if (newValue === "首页") {
		dashboardRef.value.init()
	}
})
onShow(() => {
	if (currTab.value === "首页") {
		if (dashboardRef.value) {
			dashboardRef.value.init()
		}
	}
})
onLoad((option:any) => {
	// console.log("onLoad", store.getters.token)
	// if (!store.getters.token) {
	// 	router.replaceAll("/pages/user/login")
	// }
	relative_url.value = env.H5_RELATIVE_URL
	currTab.value = option.currTab ? option.currTab : "首页"
})
</script>

<style lang="stylus">
.tabbar
	position: fixed
	bottom: 0px
	width: 100%
	height: calc(4.325rem + env(safe-area-inset-bottom))
	/* #ifdef MP-ALIPAY */
	height: 138rpx
	/* #endif */
	.cu-bar.tabbar
		height: calc(4.325rem + env(safe-area-inset-bottom))
		/* #ifdef MP-ALIPAY */
		height: 138rpx
		/* #endif */
		.action
			.cuIcon-cu-image
				margin-bottom: 4rpx
				image
					width: 56rpx
					height: 56rpx
			.tab-text
				font-size: 30rpx
				font-weight: 500
.tab-text
	width: 3.125rem
	margin: 0 auto
</style>
